<template>
	<MainLayout>
		<view class="my-page">
			<!-- 顶部个人信息卡片 -->
			<view class="header-card">
				<image class="avatar" :src="user.avatar" mode="aspectFill" @error="avatarError"></image>
				<view class="info">
					<view class="nickname">{{ user.nickname }}</view>
					<view class="uid">ID: {{ user.uid }}</view>
				</view>
			</view>

			<!-- 菜单列表 -->
			<view class="menu-list">
				<u-cell-group>
					<u-cell title="个人信息" icon="account" isLink @click="goPage('/pages/user/info')" />
					<u-cell title="我的行程" icon="car" isLink @click="goPage('/pages/mine/myTrip')" />
					<u-cell title="联系客服" icon="server-man" isLink @click="showWechatPopup" />
					<u-cell title="退出登录" isLink @click="logout">
						<template #icon>
							<image src="/static/exit.png" style="width: 24px; height: 24px;" />
						</template>
					</u-cell>
				</u-cell-group>
			</view>

			<!-- 微信客服弹窗 -->
			<u-popup v-model:show="wechatPopupVisible" mode="center">
				<view class="popup-content">
					<view class="title">扫码添加微信客服</view>
					<image class="wechat-qrcode" src="/static/WechatIMG99.jpg" mode="widthFix" style="width: 300rpx; margin: 0 auto;"></image>
					<u-button type="primary" @click="wechatPopupVisible = false">关闭</u-button>
				</view>
			</u-popup>
		</view>
	</MainLayout>
</template>

<script>
	import MainLayout from '@/layouts/MainLayout.vue'
	import api from '@/api'
	import { baseURL } from '@/utils/config.js'

	export default {
		components: { MainLayout },
		data() {
			return {
				defaultAvatat: '/images/avatar/default.png',
				user: {
					nickname: '',
					uid: '',
					avatar: ''
				},
				wechatPopupVisible: false // 控制弹窗显示
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				try {
					const res = await api.user.getUserInfo()
					if (res && res.data) {
						this.user.nickname = res.data.userInfo.nickname || '未设置昵称'
						this.user.uid = res.data.userInfo.id || ''
						this.user.avatar = res.data.userInfo.avatar
							? baseURL + res.data.userInfo.avatar
							: baseURL + this.defaultAvatat
					}
				} catch (err) {
					console.error('获取用户信息失败', err)
				}
			},
			avatarError(e) {
				e.target.src = this.defaultAvatat
			},
			goPage(page) {
				uni.navigateTo({ url: page })
			},
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '确定退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({ url: '/pages/login/index' })
						}
					}
				})
			},
			showWechatPopup() {
				this.wechatPopupVisible = true
			}
		}
	}
</script>

<style scoped>
	.my-page { background-color: #f8f8f8; min-height: 100vh; }

	.header-card {
		background: linear-gradient(90deg, #4A90E2, #5BC0DE);
		height: 200rpx; padding: 40rpx 30rpx; display: flex; align-items: center;
	}
	.avatar { width: 100rpx; height: 100rpx; border-radius: 50%; border: 4rpx solid #fff; }
	.info { margin-left: 20rpx; color: #fff; }
	.nickname { font-size: 34rpx; font-weight: bold; }
	.uid { font-size: 26rpx; opacity: 0.9; margin-top: 6rpx; }
	.menu-list { margin-top: 20rpx; }

	.popup-content { text-align: center; padding: 40rpx; }
	.title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; }
	.wechat-qrcode { width: 200rpx; height: 200rpx; margin-bottom: 20rpx; }
</style>